<template>
  <view class="logins">
    <!-- 登录 -->
    <view class="pass" v-if="loginShow">
      <view class="masks" @click="loginFn(true)"></view>
      <view
        class="popups"
        style="height: 300px; background: url(http://cdn.jxsr.com/login.png) no-repeat; background-size: 100% 100%">
        <view class="loginbutts">
          <view class="dlbutts" @click="loginFn(true)">取消</view>
          <view class="dlbutts" @click="wxGetUserInfo">确定</view>
        </view>
      </view>
    </view>
    <!-- 获取手机号 -->
    <view class="pass" v-if="fetchShow">
      <!--  @click="fetch" -->
      <view class="masks"></view>
      <view class="popups">
        <view class="titles">申请获取以下权限</view>
        <view class="conss"> 获得你的手机号用于绑定登录和支付 </view>
        <view class="butts">
          <!-- <button class="sjhbutts" @click="fetch">取消</button> -->
          <button class="sjhbutts" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { yhfindById, xcxlogin } from '@/utils/api.js';
  export default {
    name: 'logins',
    // emits:['loginFn','fetch'],
    data() {
      return {
        // 登录数据
        code: null,
        userInfo: null,
        // 用户信息
        wxuser: {},
        // 登录
        loginShow: false,
        // 是否登录
        islogin: false,
        // 申请手机号
        fetchShow: false,
      };
    },
    onShow: function () {},
    onLoad() {
      // console.log(uni.getStorageSync('scene'));
    },
    methods: {
      // 登录弹框
      loginFn(bull) {
        this.islogin = false;
        this.fetchShow = false;
        this.loginShow = bull;
        this.loginShow = !this.loginShow;
        if (!this.loginShow) {
          uni.switchTab({ url: '/pages/index/index' });
        }
      },
      //第一授权获取用户信息===》按钮触发
      wxGetUserInfo() {
        let _this = this;
        _this.loginShow = false;
        uni.getUserProfile({
          lang: 'zh_CN',
          desc: '登录',
          success: (infoRes) => {
            // console.log(infoRes.userInfo);
            _this.userInfo = infoRes.userInfo;
            try {
              // uni.setStorageSync('isCanUse', false); //记录是否第一次授权  false:表示不是第一次授权
              _this.login();
            } catch (e) {}
          },
          fail(res) {
            uni.switchTab({ url: '/pages/index/index' });
            uni.showToast({
              title: '登录授权失败',
              icon: 'none',
            });
          },
        });
      },
      //使用到的登录接口
      login() {
        let _this = this;
        uni.showLoading({
          title: '登录中...',
        });
        // 1.wx获取登录用户code
        uni.login({
          provider: 'weixin',
          success: function (loginRes) {
            //获取到code 拿着code去请求后台接口
            _this.code = loginRes.code;
            // console.log(loginRes);
            if (loginRes.errMsg == 'login:ok') {
              // uni.setStorageSync('wxloginCode', _this.code)
              uni.setStorageSync('wxloginUserInfo', _this.userInfo);
              uni.hideLoading();
              // uni.showToast({title:'微信登录成功'})
              _this.fetch();
            }
          },
        });
      },
      // 获取手机号
      fetch(txt) {
        // if(txt){
        // 	this.fetchShow=false
        // 	this.code = uni.getStorageSync('wxloginCode')
        // 	this.userInfo = uni.getStorageSync('wxloginUserInfo')
        // }
        this.fetchShow = !this.fetchShow;
      },
      getPhoneNumber(e) {
        let _this = this;
        _this.fetchShow = false;
        // console.log(e);
        if (e.detail.errMsg == 'getPhoneNumber:ok') {
          let _this = this;
          uni.showLoading({
            title: '登录中...',
          });
          _this.loginRequest(e.detail, _this.userInfo);
        } else {
          // console.log("用户点击了拒绝")
          _this.fetchShow = false;
          _this.fetch();
        }
      },
      // 登录请求
      loginRequest(phone, userInfo) {
        let _this = this;
        xcxlogin({
          code: _this.code,
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl,
          encryptedData: phone.encryptedData,
          iv: phone.iv,
        })
          .then((res) => {
            uni.hideLoading();
            if (res.code === 200) {
              // console.log(res);
              _this.islogin = true;
              uni.showToast({ title: '登录成功', icon: 'none' });
              uni.setStorageSync('token', res.data.token);
              uni.removeStorageSync('appShopId');
              uni.removeStorageSync('appBaseId');
              // uni.removeStorageSync('wxloginCode')
              _this.islogin = true;
              _this.$emit('islogins', _this.islogin, res.data);

              uni.switchTab({
                url: '/pages/index/index',
              });
            } else {
              uni.showToast({ title: '登录失败', position: 'bottom', icon: 'none' });
              _this.fetchShow = false;
              // _this.fetch()

              _this.loginShow = false;
              _this.loginFn(false);
            }
          })
          .catch((err) => {
            uni.hideLoading();
            uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
            _this.fetchShow = false;
            // _this.fetch()

            _this.loginShow = false;
            _this.loginFn(false);
          });
      },
    },
  };
</script>

<style scoped lang="scss">
  .logins {
    .pass {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      // background:rgba(0,0,0,0.5);
      z-index: 110;
      display: flex;
      align-items: center;
      justify-content: center;

      .masks {
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 110;
        position: fixed;
        top: 0;
        left: 0;
      }

      .popups {
        width: 550rpx;
        height: 300rpx;
        background: #ffffff;
        border-radius: 10px;
        z-index: 111;
        padding: 40rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;

        .titles {
          font-size: 16px;
          font-weight: 600;
          color: $mainText;
          line-height: 21px;
          text-align: center;
        }

        .conss {
          font-size: 13px;
          font-weight: 500;
          color: $mainText;
          line-height: 21px;
          text-align: center;
        }

        .butts {
          display: flex;
          justify-content: space-between;

          .sjhbutts {
            width: 40%;
          }
        }

        .loginbutts {
          position: absolute;
          bottom: 20px;
          left: 0;
          width: 100%;
          display: flex;
          justify-content: space-evenly;

          .dlbutts {
            width: 240rpx;
            height: 80rpx;
            background: #d8d8d8;
            border-radius: 31px;
            font-size: 15px;
            font-weight: 500;
            color: #ffffff;
            line-height: 80rpx;
            text-align: center;
          }

          .dlbutts:nth-child(2) {
            background: linear-gradient(-54deg, #f8b600, #098341);
          }
        }
      }
    }
  }
</style>
